<template>
  <cu-layout :bgStyle="{ title: '我的优惠券' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-coupon-container`]">
      <view class="coupon-search">
        <uv-input placeholder="请输入兑换码" border="surround" v-model="value">
          <template v-slot:suffix>
            <view class="text" @click="handleExchange">兑换</view>
          </template>
        </uv-input>
      </view>
      <view class="coupon-tabs">
        <uv-tabs v-model="current" :scrollable="false" :activeStyle="{ color: theme }" :lineColor="theme" :list="list" @change="tabsChange"></uv-tabs>
      </view>
      <view class="data-container">
        <view v-if="couponList.length == 0" class="no-data">
          <cu-empty mode="coupon"> </cu-empty>
        </view>
        <view v-else class="data-warp">
          <view :class="['coupon-item', returnName(item)]" v-for="(item, index) in couponList" :key="index">
            <view class="coupon">
              <view class="unit">￥</view>
              <view class="price">{{ item.amout }}</view>
              <view class="text">优惠券</view>
            </view>
            <view class="coupon-date">有效期 {{ item.valid_start }} -{{ item.valid_end }}</view>
            <view class="coupon-line"> </view>
            <view class="coupon-desc" @click="handleOpen(item)">
              <view :class="['fee_remark', { openBtn: item.openBtn }]">
                {{ item.fee_scope_text }}
              </view>
              <uv-icon :name="item.openBtn ? 'arrow-up' : 'arrow-down'" :color="theme" size="12"></uv-icon>
              <view v-if="item.openBtn" class="fee_scope_text">使用范围：{{ item.scope_detail || '-' }}</view>
              <view v-if="item.openBtn" class="fee_scope_text">使用说明：{{ item.instructions || '-' }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { couponList, exchangeCode } from './api'
export default {
  name: 'coupon',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      value: '',
      current: 0,
      list: [{ name: '可使用' }, { name: '已使用' }, { name: '已过期' }],
      couponList: [],
      // couponEnum: {
      //   0: '可使用',
      //   1: '已使用',
      //   2: '已过期',
      // },
      pageConfig: {
        p: 1,
        ps: 10,
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.pageConfig.p = 1
    this.couponList = []
    this.getData()
  },
  // 加载更多
  onReachBottom() {
    this.pageConfig.p++
    this.getData()
  },

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    returnName() {
      const type = this.current
      let className = ''
      switch (type) {
        case 0:
          className = 'usable'
          break
        case 1:
          className = 'used'
          break
        case 2:
          className = 'expire'
          break
        default:
          break
      }
      return className
    },
    tabsChange(e) {
      this.current = e.index
      this.pageConfig.p = 1
      this.couponList = []
      this.getData()
    },
    handleOpen(item) {
      item.openBtn = !item.openBtn
    },
    async getData() {
      const { p, ps } = this.pageConfig
      const type = this.current
      const { data } = await couponList({ p, ps, type })
      uni.stopPullDownRefresh()
      // this.couponList = data.list.map((v) => {
      //   return {
      //     ...v,
      //     openBtn: false,
      //   }
      // })
      const list = data.list.map((v) => {
        return {
          ...v,
          openBtn: false, // 展示详情变量
        }
      })
      this.pageConfig.totalCount = data.count
      this.couponList = [...this.couponList, ...list]
    },
    async handleExchange() {
      const { data, errcode, errmsg } = await exchangeCode({ exchange_code: this.value })
      if (errcode === 0) {
        this.value = ''
        this.pageConfig.p = 1
        uni.$uv.toast('兑换成功')
        setTimeout(() => {
          this.getData()
        }, 300)
      } else {
        uni.$uv.toast(errmsg)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('coupon-container')} {
  position: relative;
  padding: 0 15px;
  .coupon-search {
    margin-bottom: 4px;
    .text {
      border-left: 1px solid #f5f5f5;
      padding-left: 10px;
      font-size: 14px;
    }
  }
  .data-container {
    margin-top: 20px;
    // height: 100px;
    .no-data {
      .no-coupon {
        background: pink;
      }
    }
    .data-warp {
      // overflow: hidden;
      padding-bottom: 20px;
      .coupon-item {
        position: relative;
        // overflow-y: clip;
        &::after {
          position: absolute;
          font-size: 12px;
          background: #ecf5f8;
          width: 46px;
          height: 46px;
          text-align: center;
          line-height: 20px;
          right: 0;
          top: 0;
        }
        margin-top: 12px;
        border: 1px solid $uv-primary;
        padding: 16px 0 0px 0px;
        border-radius: 8px;
        .coupon {
          display: flex;
          align-items: flex-end;
          padding-left: 12px;
          padding-right: 12px;
          .unit {
            font-size: 20rpx;
            color: $uv-primary;
          }
          .price {
            font-size: 60rpx;
            line-height: 60rpx;
            color: $uv-primary;
          }
          .text {
            margin-left: 8px;
            font-weight: 500;
            font-size: 14px;
            color: #333333;
          }
        }
        .coupon-date {
          padding-left: 12px;
          padding-right: 12px;
          padding-top: 12px;
          padding-bottom: 15px;
          font-weight: 400;
          font-size: 12px;
        }
        .coupon-line {
          padding-left: 12px;
          padding-right: 12px;
          width: calc(100% - 24px);
          height: 1px;
          border-bottom: 1px dashed $uv-primary;
          position: relative;
          &::before {
            content: ' ';
            position: absolute;
            width: 8px;
            height: 16px;
            left: -11px;
            border: 1px solid $uv-primary;
            transform: translate(0, -50%);
            border-radius: 50%;
            background: #f5f5f5;
            left: -1.5px;
            border-radius: 0 30px 30px 0; /* 右边圆角，左边直角 */
            border-color: $uv-primary;
            border-left-color: #f5f5f5;
          }
          &::after {
            content: ' ';
            position: absolute;
            width: 8px;
            height: 16px;
            border: 1px solid $uv-primary;
            transform: translate(0, -50%);
            border-radius: 50%;
            background: #f5f5f5;
            right: -1.5px;
            border-radius: 30px 0 0 30px; /* 右边圆角，左边直角 */
            border-color: $uv-primary;
            border-right-color: #f5f5f5;
          }
        }
        .coupon-desc {
          background: #ecf5f8;
          font-weight: 400;
          font-size: 10px;
          padding: 13px 12px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          border-radius: 8px;
          width: calc(100% - 24px);
          .fee_remark {
            width: calc(100% - 12px);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .openBtn {
            width: calc(100% - 18px);
            white-space: unset;
          }
          .fee_scope_text {
            flex-basis: 100%;
            margin-top: 10px;
          }
          // .fee_scope_text
        }
      }
      .usable {
        &::after {
          // content: '可使用';
          content: ' ';
          // background: #edf5f9;
          background: cdn('/common/static/images/icon/use.png');
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          // color: $uv-primary;
        }
      }
      .used {
        opacity: 1;
        &::after {
          content: ' ';
          opacity: 1;
          background: cdn('/common/static/images/icon/used-already.png');
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }
        opacity: 0.5;
      }
      .expire {
        &::after {
          content: ' ';
          background: cdn('/common/static/images/icon/expire.png');
          background-repeat: no-repeat;
          background-size: cover;
        }
        filter: grayscale(100%);
      }
    }
  }
}
</style>
